<template>
  <el-select @change="changeEvent" :value='value' clearable :placeholder="placeholder">
    <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
export default {
  name: "SelectDepartment",
  props: {
      placeholder: String,
      defaultValue: {
        default: ''
      }
  },
  data() {
    return {
        value: '',
        depList: []
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    setValue(val) {
      console.log('val:::', val);
      if(!val) {
        val = '';
      }
      this.value = val;
    },
    clear() {
      this.value = '';
    },
    getDepartmentList() {
      this.$store.dispatch('GET_PERMISSION_LIST', {
          pageSize: 100
      }).then(res => {
        if(res.data.retCode == 0) {
          this.depList = res.data.data;
        }
      })
    },
    changeEvent(id) {
        console.log('id:::', id);
        let obj = {};
        if(!this._utils.isEmpty(id)) {
          const department = this.depList.filter(item => item.id == id);
          obj = department[0]
        }
        this.value = id;
        this.$emit('getDepartment', obj)
    }
  }
};
</script>
